<template>
	<view class="content">
	 <view class="contTop">
		 <view class="topName">累计消费总额</view>
		 <view class="money">
			 <view class="moneyIcon">￥</view>
			 <view class="moneyNum">{{billData.total||0}}</view>
		 </view>
		 <view class="contTopTis">消费统计是将您截至目前的所有消费</view>
	 </view>
	 <!-- 账单分类-->
	 <view class="main">
		 <view class="mainTitle">账单分类</view>
		 <view class="mainLine" @click="electricity">
			 <view class="mainLineLeft">
				 <view class="mainLineName">电费账单</view>
				 <view class="mainLineNum">累计消费：￥{{billData.electric_cost||0}}</view>
			 </view>
			 <view class="mainLineRight">
				 <image :src="imgUrl+'/static/wap/img/zhang_arrow@2x.png'" mode="" class="mainLineRightJt"></image>
			 </view>
		 </view>
		 <view class="mainLine" @click="water">
		        <view class="mainLineLeft">
		 				 <view class="mainLineName">水费账单</view>
		 				 <view class="mainLineNum">累计消费：￥{{billData.water_cost||0}}</view>
		 		</view>
		 		<view class="mainLineRight">
		 				 <image :src="imgUrl+'/static/wap/img/zhang_arrow@2x.png'" mode="" class="mainLineRightJt"></image>
		 		</view>
		 </view>
		 <view class="mainLine" @click="property">
			 <view class="mainLineLeft">
				 <view class="mainLineName">物业费账单</view>
				 <view class="mainLineNum">累计消费：￥{{billData.pro_cost||0}}</view>
			 </view>
			 <view class="mainLineRight">
				 <image :src="imgUrl+'/static/wap/img/zhang_arrow@2x.png'" mode="" class="mainLineRightJt"></image>
			 </view>
		 </view>
		 
	 </view>
	</view>
</template>

<script>
	import util from '../../static/util.js'
	export default {
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				billData:{}
			}
		},
		onLoad() {
			// this.getBillinfo()
		},
		onShow() {
			this.getBillinfo()
		},
		methods: {
			// 获取账单信息
			getBillinfo(){
				this.ajax({
					url:'/api/bill/getBillInfo',
					data:{},
					success:(res)=>{
						this.billData=res.data
						
					}
				  })
			},
           electricity(){
			   uni.navigateTo({
			   	url: "electricityBill"
			   
			   })
		   },
		   property(){
			   uni.navigateTo({
			     	url: "propertyBill"
			   
			   })
		   },
		   water(){
			  uni.navigateTo({
			    	url: "waterBill"
			  
			  }) 
		   }
		}
	}
</script>

<style lang="scss" scoped>
	.contTop{
		width: 690rpx;
		height: 334rpx;
		margin: 0 auto;
		background: url(https://nengyuan.chuangxiangdianli.com/static/wap/img/zhang_banner@2x.png) no-repeat 100% 100%;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding-left: 20rpx;
	} 
	.topName{
		padding-left: 35rpx;
		padding-top: 43rpx;
		opacity: 0.68;
		font-size: 36rpx;
		font-family: PingFang SC Medium, PingFang SC Medium-Medium;
		font-weight: bold;
		color: #ffffff;
	}
	.money{
		display: flex;
		padding-left: 35rpx;
		padding-top: 10rpx;
	}
	.moneyIcon{
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
		padding-top: 50rpx;
	}
	.moneyNum{
		font-size: 80rpx;
		color: #ffffff;
		font-weight: bold;
	}
	.contTopTis{
		opacity: 0.5;
		font-size: 30rpx;
		font-family: PingFang SC Medium, PingFang SC Medium-Medium;
		font-weight: 500;
		padding-top: 20rpx;
		padding-left: 35rpx;
		color: #FFFFFF;
		width: 324rpx;
	}
	.main{
		padding: 30rpx;
		padding-top: 57rpx;
	}
	.mainTitle{
		font-size: 26rpx;
		color: #808080;
	}
	.mainLine{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
	}
	.mainLineRightJt{
		width: 18rpx;
		height: 18rpx;
	}
	.mainLineName{
		font-size: 36rpx;
		color: #333333;
	}
	.mainLineNum{
		font-size: 26rpx;
		color: #808080;
		padding-top: 22rpx;
	}
</style>
